<template>
    <div class="flex raw h-full">
        <div class="keys w-2/5 p-1.5 shadow-lg bg-gray-50 overflow-auto">
            <ul role="list" class="mt-3 grid grid-cols-1 gap-2.5 ">
                <li v-for="project in projects" :key="project.name"
                    class="col-span-1 flex rounded-md shadow-sm hover:cursor-pointer">
                    <div
                        :class="[project.bgColor, 'flex w-16 flex-shrink-0 items-center justify-center rounded-l-md text-sm font-medium text-white']">
                        {{ project.initials }}</div>
                    <div @click="getValue(project)"
                        class="flex flex-1 items-center justify-between truncate rounded-r-md border-b border-r border-t border-gray-200 bg-white hover:bg-slate-100">
                        <div class="flex-1 truncate px-4 py-2 text-sm text-right">
                            <a class="font-medium text-gray-900 hover:text-gray-600">{{ project.name }}</a>
                        </div>
                    </div>
                    <div class="flex-shrink-0 pr-2">
                        <Menu as="div" class="relative ml-auto">
                            <MenuButton class="-m-2.5 block p-2.5 text-gray-400 hover:text-gray-500">
                                <span class="sr-only">Open options</span>
                                <EllipsisVerticalIcon class="h-5 w-5" aria-hidden="true" />
                            </MenuButton>
                            <transition enter-active-class="transition ease-out duration-100"
                                enter-from-class="transform opacity-0 scale-95"
                                enter-to-class="transform opacity-100 scale-100"
                                leave-active-class="transition ease-in duration-75"
                                leave-from-class="transform opacity-100 scale-100"
                                leave-to-class="transform opacity-0 scale-95">
                                <MenuItems
                                    class="absolute right-0 z-10 mt-0.5 w-32 origin-top-right rounded-md bg-white py-2 shadow-lg ring-1 ring-gray-900/5 focus:outline-none">
                                    <MenuItem v-slot="{ active }">
                                    <a href="#" @click="editLink(project)"
                                        :class="[active ? 'bg-gray-50' : '', 'block px-3 py-1 text-sm leading-6 text-gray-900']">编辑<span
                                            class="sr-only"></span></a>
                                    </MenuItem>
                                    <MenuItem v-slot="{ active }">
                                    <a href="#" @click="deleteLink(project)"
                                        :class="[active ? 'bg-gray-50' : '', 'block px-3 py-1 text-sm leading-6 text-gray-900']">删除<span
                                            class="sr-only"></span></a>
                                    </MenuItem>
                                </MenuItems>
                            </transition>
                        </Menu>
                    </div>
                </li>
            </ul>
        </div>
        <div class="w-3/5">
            <RedisValue :type="selectKey.type" :key="selectKey.key" :value="selectKey.value" />
        </div>
    </div>
</template>

<script lang="ts" setup>
import { tryOnMounted } from '@vueuse/core';
import { useRoute, useRouter } from 'vue-router';
import { RedisTypeColor } from '@/enums/redisEnum'
import RedisValue from './RedisValue.vue'
import { invoke } from '@tauri-apps/api/tauri'
import { ref } from 'vue';
import { getBgColor } from '@/utils/redis'
import type { KeyValue } from '@/types/redis';
import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/vue'
import { EllipsisVerticalIcon } from '@heroicons/vue/20/solid'

const router = useRouter()
const route = useRoute()

const selectKey = ref<KeyValue>({
    type: '',
    key: '',
    value: ''
})

type Projects = {
    name: string,
    initials: string,
    href: string,
    bgColor: string
}

type KeyType = {
    key: string,
    key_type: string
}

const projects1 = [
    { name: 'SYS_CONF', initials: 'string', href: '#', bgColor: RedisTypeColor.STRING },
    { name: 'Component Design', initials: 'hash', href: '#', bgColor: RedisTypeColor.HASH },
    { name: 'Templates', initials: 'list', href: '#', bgColor: RedisTypeColor.LIST },
    { name: 'React Components', initials: 'set', href: '#', bgColor: RedisTypeColor.SET },
]

const projects = ref<Array<Projects>>([])

const loadKeys = () => {
    const url = route.query.url;
    console.log(url);
    if (url) {
        invoke('redis_keys_block', { url: url }).then((res) => {
            console.log(res);
            const resMap = res as Array<KeyType>
            resMap.map((item) => {
                projects.value.push({
                    name: item.key,
                    initials: item.key_type,
                    href: '#',
                    bgColor: getBgColor(item.key_type),
                })
            })
        }).catch((e) => {
            console.log(e)
        });
    }
}

const getValue = (project: Projects) => {
    const url = route.query.url;
    if (url && project.name) {
        if (project.initials == 'string') {
            invoke('redis_string_value_block', { url: url, key: project.name })
                .then((res) => {
                    const ress = res as Object;
                    selectKey.value = {
                        type: project.initials,
                        key: project.name,
                        value: ress
                    }
                })
                .catch(e => {
                    console.log(e.message);
                })
        } else if (project.initials == 'hash') {
            invoke('redis_hash_value_block', { url: url, key: project.name })
                .then((res) => {
                    const ress = res as Object;
                    selectKey.value = {
                        type: project.initials,
                        key: project.name,
                        value: ress
                    }
                    console.log(res);
                })
                .catch(e => {
                    console.log(e.message);
                })
        }
    }
}

const editLink = (project: Projects) => {

}

const deleteLink = (project: Projects) => {

}

tryOnMounted(() => {
    loadKeys();
})
</script>